<script lang="ts">
  import BroadcastComp from './components/Broadcast.svelte';
  import { getIsShow } from './api/index';
  import BroadcastMini from './components/BroadcastMini.svelte';
  import { BroadcastStatus, type Position } from './types/vtuber';
  import type Broadcast from './utils/broadcast';
  import { errorReport, sendStat, judgeChrome49 } from './utils/tools';
  import { AvatarType } from './types/broadcastMini';
  export let miniDragable: boolean = true;
  export let position: {
    min: Position;
    max: Position;
  };
  export let avatarType: AvatarType = AvatarType.Gold;
  // 当前组件是否展示
  let isShow: boolean = false;
  let isMini: boolean = true;
  let broadcastDom;
  // 切换最小化和最大化状态
  const toggleMiniStatus = ({ detail: { isMiniStatus } }) => {
    isMini = isMiniStatus;
    if (!isMini) {
      broadcastDom && broadcastDom.setMaxPlay();
      sendStat('_cpsy_zxhrk_dj');
    }
  };

  // 是否是首次进入
  let isFirstEnter: boolean = true;
  // 是否是自动播放
  let isAutoplay: boolean = false;
  // 当前是否正在播放
  let isPlaying: boolean = false;
  // 播报实例
  let broadcast: Broadcast | void;

  // 开始播报的时间
  let startTime: Date | void;

  // 是否是chrome49
  const isChrome49: boolean = judgeChrome49();

  const updateBroadcastStatus = ({ detail: { broadcastStatus } }) => {
    const options = {
      [BroadcastStatus.IsFirstEnter]: () => {
        isFirstEnter = true;
        isAutoplay = false;
      },
      [BroadcastStatus.Autoplay]: () => {
        isFirstEnter = false;
        isAutoplay = true;
      }
    };
    if (options[broadcastStatus]) {
      options[broadcastStatus]();
    } else {
      isFirstEnter = false;
      isAutoplay = false;
    }
  };

  const getBroadcast = ({ detail: { broadcastIns } }) => {
    broadcast = broadcastIns;
  };
  const updateIsPlaying = ({ detail: { isPlayingStatus } }) => {
    isPlaying = isPlayingStatus;
    if (isPlaying) {
      startTime = new Date();
    } else {
      if (!startTime) {
        return;
      }
      const nowTime = new Date();
      const diffTime = nowTime.getTime() - startTime.getTime();
      sendStat(`_zxh_bfzt_${diffTime / 1000}`);
    }
  };

  //  切换自动播放
  const toggleAutoplay = () => {
    if (!broadcast) {
      return;
    }
    broadcast.toggleAutoPlay();
    isAutoplay = broadcast.getAutoPlayStatus();
    const stat = isAutoplay ? '_dhym_kqzdbb_2' : '_dhym_gbzdbb_2';
    sendStat(stat);
  };

  // 关闭播放
  const turnoffPlay = () => {
    if (!broadcastDom) {
      return;
    }
    broadcastDom.endBroadcast(false);
  };

  getIsShow()
    .then((res) => {
      isShow = res?.data;
    })
    .catch((error: Error) => {
      errorReport({
        name: `获取组件是否展示报错 ${error.name}`,
        message: error.message,
        stack: error.stack
      });
    });
  export const getIsMini = (): boolean => isMini;
</script>

<div class="vtuber-comp">
  {#if isShow}
    {#if isChrome49}
      <BroadcastMini position={position.min} dragAble={miniDragable} {isChrome49} />
    {:else}
      <BroadcastMini
        isShow={isMini}
        position={position.min}
        {avatarType}
        {isPlaying}
        {isAutoplay}
        {isFirstEnter}
        dragAble={miniDragable}
        on:toggleMiniStatus={toggleMiniStatus}
        on:toggleAutoplay={toggleAutoplay}
        on:turnoffPlay={turnoffPlay}
      />
      <BroadcastComp
        bind:this={broadcastDom}
        isShow={!isMini}
        position={position.max}
        on:updateBroadcastStatus={updateBroadcastStatus}
        on:updateIsPlaying={updateIsPlaying}
        on:toggleMiniStatus={toggleMiniStatus}
        on:getBroadcast={getBroadcast}
      />
    {/if}
  {/if}
</div>

<style lang="less">
  .vtuber-comp {
    margin: initial;
    :global(div),
    :global(span),
    :global(h1),
    :global(p),
    :global(a),
    :global(ol),
    :global(input) {
      margin: initial;
    }
  }
</style>
